<style scoped>
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }

  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .rj-cell.note {
    width: 100%;
  }

  .rj-cell.note label {
    float: left;
  }

  .rj-cell.note span {
    width: 80%;
    display: inline-block;
  }

  .weui-panel {
    background: #eee;
  }

  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }

  .weui-panel {
    margin-top: 0;
    text-align: left;
  }

  .attachimg {
    /*width: 100%;*/
  }

  .tit label, .tit span {
    font-size: 16px;
  }

  .tit label {
    padding-right: 20px;
  }

  .weui-panel.weui-panel_access {
    padding-bottom: 10px;
  }

  /*.weui-panel__bd:not(.base) {*/
  /*  width: 98%;*/
  /*  padding: 0 1% 2px 1%;*/
  /*}*/

  .rj-cont-tit:not(.base) {
    border-radius: 5px;
  }

  .weui-cell {
    background: #fff;
  }

  .weui-cells__title {
    text-align: left;
    background: #eee;
  }

  .oitem {
    padding: 3px;
  }

  #acts span {
    font-size: 14px;
  }

  .weui-label {
    text-align: left;
  }

  .weui-media-box {
    text-align: left;
  }

  .weui-panel {
    background: #eee;
  }

  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }

  .weui-panel {
    margin-top: 0;
    text-align: left;
  }

  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui_navbar_item {
    font-size: 14px;
  }
  .weui_navbar_item.weui_bar_item_on {
    color: #3cc51f;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .list {
    overflow: auto;
  }
  .weui-cells {
    margin-top: 0;
  }
  .rj-wrap {
    background: #eee;
    overflow:auto;overflow-x: hidden
  }
  .rj-cont {
    background: #fff;
  }
  .weui-panel {
    background: #eee;
  }
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }
  .weui-panel {
    margin-top: 0;
  }
  .demos-content-padded {
    padding: 15px;
  }
  .attachimg {
    width: 100%;
  }
  .tp-item {
    width: 32%;text-align: center;background: #fafafa;
    padding: 5px 2px;
    /*overflow: auto;*/
  }

  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
    min-width: 25%;
  }

  .rj-cell.max span {
    font-size: 16px;
    padding-right: 20px;
  }

  .rj-cell label {
    color: #333;
    font-size: 14px;
  }

  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }

  .rj-cell.note {
    width: 100%;
  }

  .rj-cell.note label {
    float: left;
  }

  .rj-cell.note span {
    width: 80%;
    display: inline-block;
  }
  .searchInput {
    border: 1px solid #ccc;
    margin-right: 20px;
    padding: 5px 10px;
    border-radius: 5px;
  }
</style>
<template>
  <div class="comon" style="background: #eee;height: 100%;overflow:auto;">
    <div
      style="height: 50px; line-height: 50px; background: #fff; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      支付申请列表
      <a href="javascript:" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px"/>
      </a>
    </div>
    <div class="weui-panel weui-panel_access">
<!--      <div class="weui-panel__bd">-->
<!--        <div class="weui-form-preview billitem rj-cont-tit" style="position: relative;">-->
<!--          <div class="rj-cell max">-->
<!--            <div class="weui-cell rj-cont" style="background: #fff;padding: 0;">-->
<!--              <div class="weui-cell__hd"><label class="weui-label" style="font-weight: 600;padding-left: 5px;"></label></div>-->
<!--              <div class="weui-cell__bd" style="display: flex;align-items: center;">-->
<!--                <select class="weui-select" v-model="org" style="width: 70%;" >-->
<!--                  <option value="" disabled>请选择采收合同</option>-->
<!--                  <option v-for="(item, index) in orgs" :key="item.id" :value="item.id">-->
<!--                    {{ item.name }}-->
<!--                  </option>-->
<!--                </select>-->
<!--                <a href="javascript:;" @click="getPays" class="weui-btn weui-btn_primary" style="width: 25%;font-size: 12px;">查询</a>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <div class="weui-cell">
        <div class="weui-cell__bd" style="display: flex;align-items: center;">
          <input class="weui-input searchInput" type="text" v-model="keywords" placeholder="请输入供应商或主体名称" >
          <a href="javascript:;" @click="getPays" class="weui-btn weui-btn_primary" style="width: 25%;font-size: 12px;">查询</a>
        </div>
      </div>
    </div>
    <div class="list" id="list">
      <div v-for="(item, index) in pays" class="weui-form-preview billitem" style="text-align: left;">
        <div class="rj-cell max">
          <label>付款主体:</label>
          <span>{{item.orgname}}</span>
        </div>
        <div class="rj-cell max">
          <label>供应商:</label>
          <span>{{item.supplierName}}</span>
        </div>
        <div class="rj-cell max">
          <label>应付金额:</label>
          <span>{{attachUnit(item.unpaidSettlement, ' 元')}}</span>
        </div>
        <div class="rj-cell max">
          <label>应付数量:</label>
          <span>{{item.unpaidWeight}}</span>
        </div>
        <div class="rj-cell max">
          <label>应付订单数:</label>
          <span>{{attachUnit(item.unpaidCount, ' 单')}}</span>
        </div>
        <div class="weui-form-preview__ft">
          <a class="weui-form-preview__btn weui-form-preview__btn_primary" @click="$router.push({path: '/purchase2/bill/add', query: {orgId: item.orgId, supplierId: item.supplierId, supplierName: item.orgname}})">申请支付</a>
        </div>
      </div>
    </div>
    <div v-if="loading" class="weui-loadmore" id="dis">
      <i class="weui-loading"></i>
      <span class="weui-loadmore__tips">正在加载</span>
    </div>
    <div v-if="!loading" class="weui-loadmore weui-loadmore_line" style="" id="disp">
      <span class="weui-loadmore__tips">没有更多了</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'pays42',
    data() {
      return {
        flowid: 42,
        userid: localStorage.userId,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        pays: [],
        orgs: [],
        org: '',
        loading: true,
        keywords: ''
      }
    },
    components: {
    },
    created() {
      window.addEventListener('setItem', () => {
        this.userid = localStorage.getItem('userId');
      })
    },
    mounted() {
      // this.getOrgs();
      this.getPays();
    },
    methods: {
      getOrgs: function() {
        this.axios({
          method: 'get',
          url: '/prod-api/getOrgs',
        }).then(response => {
          if (response.data.code == 200) {
            this.orgs = response.data.data;
          } else {
            this.toastText('获取组织数据失败')
          }
        });
      },
      getPays: function () {
        let params = {};
        if (this.keywords) {
          params.keywords = this.keywords;
        }
        this.axios({
          method: 'get',
          url: `/prod-api/pay/payinfo/getUnPayPurchasebillGroup`,
          params: params
        }).then(response => {
          if (response.data.code == 200) {
            this.pays = response.data.data;
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError('系统错误');
          }
          this.loading = false;
        });
      },
    }
  }
</script>
